<template>
	<view class="withdraw">
		<view class="main">
			<view class="header">
				<view class="left">到账银行卡</view>
				<view class="bank" @click="showPopup" v-if="bankList.length>0">
							<view class="bank_word" v-if='isUsedBankArr.length>0'>
								<text>{{checkedBankObj.bankNameNum}}</text>
								<text>1到3个工作日内到账</text>
							</view>
							
							<view class="noBank noUsed" v-if='isUsedBankArr.length===0'>
								暂无可用的银行卡
							</view>
							<!-- <view class="noBank" @click="addBank" v-if='bankList.length < 3 && isUsedBankArr.length===0'>
								+添加银行卡
							</view>
							 -->
							<view class="icon">
								<uni-icon type="arrowright" size="20"></uni-icon>
							</view>	
				</view>
				<view class="noBank" @click="addBank" v-if="bankList.length===0">
					+添加银行卡
				</view>
				
				
			</view>
			<view class="middle">
				<text class="word">提现金额(元)</text>
				<view><text>￥</text><input class="uni-input" type="number" v-model="money" @blur="handleBlur" @input='onChange' :placeholder='placeholder' placeholder-style="font-weight:400;color:#cccccc;font-size:28upx;" placeholder-class="phStyle"></view>
			</view>
			<view class="footer">
				<text class="tip" v-if="money">实际到账¥{{trueMoney}}，扣除¥{{charge}}元提现手续费({{serviceCharge}})</text>
				<view class="tip" v-else>电子钱包余额¥{{balance}}，  <text @click="allMoney">  全部提现</text></view>
				<view class="withdraw_btn" :class="{activeBj:changeBJ}" @click="withdraw">提 现</view>
			</view>
			
		</view>
		
		
		<!-- 选择银行卡 -->
		
		<uni-popup :show="bottom_Poup" :type="popType" v-on:hidePopup="hidePopup">
			<view class="chooseBank">
					<view class="chooseBankWrap">
							<view class="title">
								<view class="closeWrap" @click='close' >
									<uni-icon class='close' type="closeempty" size="30" color='#ccccccc'></uni-icon>
								</view>
									
									<text>选择到账银行卡</text>
							</view>
							<view class="list">
											<radio-group @change="radioChange" class="radioGroup" >
													<label class='radio' :class="{'gray':item.authStatus.value !=='success'}" v-for="(item,index) in bankList" :key="index">
															<view class="left" @click="close">
																<radio :value="item.value" :checked="index===0 ? true: false" color="#ff1268"  v-if="item.authStatus.value ==='success'"/>
																<!-- <radio :value="item.index" :checked="item.checked" disabled="{item.authStatus.value !=='success'}" color="#ff1268"/> -->
																<text>{{item.bankNameNum}}</text> <text v-if="item.authStatus.value !=='success'">(审核中)</text>
															</view>
															<view class="icon" v-on:click.stop="manageBank(item)">
																<uni-icon type="arrowright" size="20" color='#ccccccc'></uni-icon>
															</view>		
														
													</label>
											</radio-group>
							</view>
							<view class="bank_footer">
									<text @click="addBank">使用新卡提现</text>
							</view>
									
							
					
					</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
var util = require('../../../common/util.js');
import uniPopup from '@/components/uni-popup.vue';
export default {
    data() {
        return {
			withdrawMaxMoney: 10,
            money: '',
            placeholder: '10元起提，每笔提现收取手续费',
            name: '',
            balance: 0,
            lastNum: '',
            showTrueMoney: false,
            changeBJ: false,
            isUsedBank: false,
            authStatusValue: '',
            authTime: '',
            payType: 'wxpay',
            popType: 'bottom',
            bottom_Poup: false,
            bankId: 0,
            checkedBank: 0,
            bankTags: [],
            bankNameNum: '',
            checkedBankNameNum: '',
            checkedBankId: 0,
            checkedBankObj: {}, // 选中的银行对象
            isUsedBankArr: [], // 可用的银行列表
            isFirst: true,
			serviceCharge:0,
			serviceChargeTrue:0,
            bankList: []
        };
    },
    onLoad() {
        this.isFirst = true;
        this.getBankTags();
		this.globalRuleGet();
        this.getUserInfo();
    },
    onShow() {
        console.log(this.isFirst);
        if (!this.isFirst) {
            this.getBankTags();
            this.getUserInfo();
        }
    },
	computed: {
		trueMoney() {
			// console.log(100-this.serviceChargeTrue)
			return util.showDecimal( this.money * (100-this.serviceChargeTrue));
		},
		charge() {
			// console.log(this.serviceChargeTrue)
			return util.showDecimal( this.money * this.serviceChargeTrue);
		}
	},
    methods: {
		globalRuleGet() {
			util.ajax(
				'globalRuleGet',
				{
					token: util.getUserToken()
				},
				data => {
					let json = data.data;
					if (json.status) {
						console.log(json.data.rule.proportionOfUserWithdraw);
						this.serviceChargeTrue = json.data.rule.proportionOfUserWithdraw > 0
								? json.data.rule.proportionOfUserWithdraw * 100
								: 0;
						this.serviceCharge =
							json.data.rule.proportionOfUserWithdraw > 0
								? json.data.rule.proportionOfUserWithdraw * 100 + '%'
								: 0;
								
								this.placeholder  = '10元起提，每笔提现收取'+this.serviceCharge+'手续费'
					} else {
						uni.showToast({
							title: json.message,
							icon: 'none',
							duration: 1000
						});
					}
				},
				(data, code) => {
					uni.showToast({
						title: JSON.stringify(data.message),
						icon: 'none',
						duration: 1000
					});
				}
			);
		},
		onChange(e) {
			let value = +e.detail.value || 0;
			if(value >=10){
				this.changeBJ = true;
			}else{
				this.changeBJ = false;
			}
			
			if (+this.balance < value) {
				value = this.balance;
				uni.showToast({
					title: '已超出钱包余额',
					icon: 'none',
					duration: 1000
				});
			}
			this.money = value || '';
			
		},
        showPopup() {
            this.bottom_Poup = true;
        },
        getBankTags() {
            util.ajax(
                'tagList',
                {
                    tagType: 'bank',
                    token: util.getUserToken()
                },
                data => {
                    let json = data.data;
                    if (json.status) {
                        // console.log(json.data);
                        let arr = json.data;

                        arr.map((item, index) => {
                            this.bankTags.push({ label: item.name, value: item.id });
                        });
                        console.log(this.bankTags);
                        this.getMyBankList();
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        getMyBankList() {
            util.ajax(
                'userBanks',
                {
                    token: util.getUserToken()
                },
                data => {
                    let json = data.data;
                    if (json.status) {
                        // console.log(json.data);
												this.bankList = []
												this.isUsedBankArr = []
                        for (let i = 0; i < json.data.length; i++) {
                            if (json.data[i].authStatus.value !== 'failed') {
                                for (let j = 0; j < this.bankTags.length; j++)
                                    if (json.data[i].tagId === this.bankTags[j].value) {
                                        // console.log(this.bankTags[j].label);
                                        json.data[i].bankName = this.bankTags[j].label;
                                    }
                                let number = json.data[i].number;
                                json.data[i].lastNum = number.substr(number.length - 4, 4);
                                json.data[i].bankNameNum =
                                    json.data[i].bankName + json.data[i].lastNum;
                                json.data[i].value = JSON.stringify(json.data[i]);
                                this.bankList.push(json.data[i]);

                                if (json.data[i].authStatus.value === 'success') {
                                    this.isUsedBankArr.push(json.data[i]);
                                }
                                // this.isUsedBankArr[0].checked = true
                            }
                        }
                        console.log(this.bankList);
                        this.checkedBankObj = this.isUsedBankArr[0];
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        close() {
            this.bottom_Poup = false;
        },
        radioChange(e) {
            console.log(e);
            this.checkedBankObj = JSON.parse(e.target.value);
            this.bottom_Poup = false;
        },
        manageBank(item) {
            console.log(item);
            this.bottom_Poup = false;
            this.isFirst = false;
            this.bankList = [];
            this.bankTags = [];
            this.isUsedBankArr = [];
            uni.navigateTo({
                url: './manageBank?id=' + item.id + '&name=' + item.bankNameNum
            });
        },
        hidePopup() {
            this.bottom_Poup = false;
        },
        addBank() {
            if (this.authTime === 0) {
				let  content = '您还未实名认证，请完成实名认证后再添加银行卡信息。'
                this.authStatus(content);
            } else {
                if (this.bankList.length < 3) {
                    uni.navigateTo({
                        url: './addBankCard?name=' + this.name
                    });
                } else {
                    uni.showToast({
                        title: '最多只能添加三张银行卡',
                        icon: 'none',
                        duration: 1000
                    });
                }
            }
        },

        recharge(e) {},
        allMoney() {
            this.money = this.balance;
			this.changeBJ  = true;
        },
        handleBlur(e) {
            this.showTrueMoney = true;
        },
        getUserInfo() {
            util.ajax(
                'userDetail',
                {
                    token: util.getUserToken()
                },
                data => {
                    let json = data.data;
                    if (json.status) {
                        // console.log(json)
                        this.authTime = json.data.authTime;
                        this.name = json.data.name;
                        this.balance = util.showDecimal(json.data.surplus);
                        this.authStatusValue = json.data.authStatus.value;
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    // console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        authStatus(content) {
            uni.showModal({
                title: '温馨提示',
                content: content,
                cancelText: '去认证',
                cancelColor: '#cccccc',
                confirmText: '再看看',
                confirmColor: '#fff',
                success: res => {
                    if (res.confirm) {
                    } else if (res.cancel) {
                        if (this.authStatusValue === 'checking') {
                            uni.navigateTo({
                                url: '../toCertification3'
                            });
                        } else {
                            uni.navigateTo({
                                url: '../toCertification'
                            });
                        }
                    }
                },
                fail: () => {},
                complete: () => {}
            });
        },
        withdraw() {
            if (this.authTime === 0) {
				let  content = '您还未实名认证，请完成实名认证后再执行提现操作。'
                this.authStatus(content);
            } else {
				
                if (!this.checkedBankObj) {
                    uni.showToast({
                        title: '请选择提现银行！',
                        icon: 'none',
                        duration: 1000
                    });
                    return;
                } 
				if (!this.money) {
                    uni.showToast({
                        title: '请输入金额！',
                        icon: 'none',
                        duration: 1000
                    });
                    return;
                }
				if (this.money<this.withdrawMaxMoney) {
					uni.showToast({
						title: `最低提现${this.withdrawMaxMoney}元！`,
						icon: 'none',
						duration: 1000
					});
					return;
				}
                uni.showLoading({
                    title: '正在提现...'
                });

                util.ajax(
                    'userBankWithdraw',
                    {
                        money: this.money * 100,
                        bankId: this.checkedBankObj.id,
                        token: util.getUserToken()
                    },
                    data => {
                        uni.hideLoading();
                        let json = data.data;
                        if (json.status) {
                            uni.showToast({
                                title: '提現成功',
                                icon: 'none',
                                duration: 600
                            });
                            setTimeout(() => {
                                uni.reLaunch({
                                    url: '../../my/index'
                                });
                                //                                 uni.navigateBack({
                                //                                     delta: 2
                                //                                 });
                            }, 1000);
                        } else {
                            uni.showToast({
                                title: json.message,
                                icon: 'none',
                                duration: 1000
                            });
                        }
                    },
                    (data, code) => {
                        console.log(data);
                        uni.showToast({
                            title: JSON.stringify(data.message),
                            icon: 'none',
                            duration: 1000
                        });
                    }
                );
            }
        }
    },
    components: {
        uniIcon,
        uniPopup
    }
};
</script>

<style lang="less">
@import '../../../common/icon.css';
@import '../../../common/uni.css';
page{
	background:rgb(240,239,244) ;
}
.phStyle{
	font-size: 28upx;
}
view{
	line-height: 1.8;
}
uni-radio .uni-radio-input{
	width: 20upx;
	height: 20upx;
	line-height: 20upx;
}
uni-radio{
	display: flex;
	align-items: center;
	margin-right: 20upx;
	.uni-radio-wrapper{
		line-height: 1.15;
		
	}
}

.withdraw {
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: auto;
    .main {
        flex-direction: column;
        padding: 40upx;
        .header {
            background: #fbfbfb;
            box-sizing: border-box;
            // border:1px solid red;
            padding: 42upx 61upx;
            height: 150upx;
            .left {
                width: 40%;
				font-size: 28upx;

                // border:1px solid red;
            }
            .nobank {
                width: 60%;
            }
            .bank {
                // border:1px solid red;
                width: 60%;
                justify-content: space-between;
                .bank_word {
                    flex-direction: column;
                    text:first-child {
                        // font-size: 30upx;
                        color: #333333;
                    }
                    text:last-child {
                        font-size: 28upx;
                        color: #999999;
                    }
                }
                .noUsed {
                    color: gray;
                }
                .icon {
                    font-size: 20upx;
                    color: #999999;
                    align-items: center;
                }
            }
        }
        .middle {
            padding: 30upx 61upx;
            box-sizing: border-box;
            flex-direction: column;
            background: white;
            .word {
                font-size: 28upx;
                color: rgb(51,51,51);
            }

            view {
                padding: 30upx 0;
                align-items: center;
                border-bottom: 1px solid #eeeeee;
                margin-top: 20upx;
                text {
                    font-size: 42upx;
                    color: #333333;
                    font-weight: 600;
                }
                input {
                    font-size: 42upx;
                    color: #333333;
                    font-weight: 600;
                    padding-left: 20upx;
                }
            }
        }
        .footer {
            background: white;
            padding: 10upx 50upx 56upx;
            box-sizing: border-box;
            flex-direction: column;
            width: 100%;
            view:first-child {
                font-size: 28upx;
                color: #999999;
                text {
                    color: #ff1268;
                }
            }

            .withdraw_btn {
                background: #ff1268;
                color: white;
                font-size: 34upx;
                width: 100%;
                height: 100upx;
                justify-content: center;
                align-items: center;
                border-radius: 5upx;
                margin: 42upx auto 0;
                background: -webkit-linear-gradient(to right, #fabde6, #ffa0c2);
                background: -o-linear-gradient(to right, #fabde6, #ffa0c2);
                background: -moz-linear-gradient(to right, #fabde6, #ffa0c2);
                background: -mos-linear-gradient(to right, #fabde6, #ffa0c2);
                background: linear-gradient(to right, #fabde6, #ffa0c2);
            }
			.activeBj {
				background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
				background: -o-linear-gradient(to right, #ff48ac, #ff1268);
				background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
				background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
				background: linear-gradient(to right, #ff48ac, #ff1268);
				color: white;
			}
        }
    }
    .chooseBank {
        width: 100%;
        // background: transparent;
        position: fixed;
        bottom: 0;
        .chooseBankWrap {
            background: white;
            margin: 0 auto;
            width: 100%;
            flex-direction: column;
            .title {
                position: relative;
                justify-content: center;
                align-items: center;
                height: 100upx;
                border-bottom: 1upx solid #eeeeee;
				.closeWrap{
					// border: 1upx solid red;
					padding: 10upx;
					position: absolute;
                    left: 20upx;
                }
					.close {
                    
				}
                
                text {
                    font-size: 30upx;
                }
            }
        }
        .list {
            flex-direction: column;
            .radioGroup {
                width: 100%;
                .radio {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    height: 100upx;
                    border-bottom: 1upx solid #eeeeee;
                    padding: 0 30upx;
                }
                .gray {
                    color: #cccccc;
					padding-left: 100upx;
                }
                .icon {
                    width: 100upx;
                    justify-content: flex-end;
                }
            }
        }
        .bank_footer {
            height: 200upx;
            flex-direction: column;

            text {
                font-size: 28upx;
                padding: 20upx 100upx;
				line-height: 1.8;
            }
        }
    }
}
</style>
